<extend name="Public/base"/>
<!--extend name="./Application/Common/View/base/common.html"/-->
<block name="body">
<style>
       .nav-tabs > li > a {
         padding:5px 20px;
        }
        .nav-tabs {
           padding:0px 0px 0px 20px;
        }
		.nav-tabs > li > a {
           line-height:18px;
        }

ul{list-style-type:none;margin:0px 0px;padding:10px 15px 0px 15px}
.rmb-box{
    display:block;
	float: left;
	margin: 0px 0px 10px 0px;
	margin-right:2%;
	width:32%;
	position: relative;
	padding: 5px 0;
	transition: left .2s ease,border .5s,z-index .5s;
	padding-bottom: 15px;
	top: 1px;
	background-color: #fff;   
	border: 1px solid #cccccc;
	padding-top: 0;
	min-height: 250px;
}
.rmb-box:nth-child(3n){margin-right: 0;}
.rmb-box:hover{
	box-shadow: 0 15px 30px rgba(0,0,0,0.1);
	z-index: 20;
	top: -1px;
	
}

.rmb-product-detail {
	width: 100%;
	text-align: center;
	height: 150px;
	border-bottom: solid #cccccc 1px;
	background: #fff;
	overflow: hidden;
}
.rmb-product-detail>a{
	width: 100%;
	height: 150px;
	display: grid;
	display: flex; 
	vertical-align: middle;
	text-align: center;
	
}
.rmb-product-detail>a>img{
	max-width: 100%;
	/*max-height: 100%;*/
	vertical-align: middle;
	margin: auto;
}
.rmb-product-detail>a img:hover{ 
  	cursor: pointer;  
    transition: all 0.6s; 
	 -webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);
}

.rmb-product-desc{
	margin-top: 1.5px;
	text-align: left;
	padding-left: 10px;
	font-size:14px;
	height: 39px; 
}
.rmb-product-explain{padding:4px 0px;border:0px solid #ff0000;height:26px;overflow:hidden}
.rmb-product-explain a{
	color: #454545;
	font-size: 14px; 
}
.rmb-product-price{;border:0px solid #ff0000;margin:0px;padding:5px 0px 0px 0px}

@media screen and (max-width:600px){
 .rmb-box{
    display:block;
	float: left;
	margin: 0px 0px 10px 0px;
	margin-right:4%;
	width:48%;
	position: relative;
	padding: 5px 0;
	transition: left .2s ease,border .5s,z-index .5s;
	padding-bottom: 15px;
	top: 1px;
	background-color: #fff;   
	border: 1px solid #cccccc;
	padding-top: 0;
	min-height: 200px;
 }
 .rmb-box:nth-child(2n){margin-right: 0;}
 .rmb-box:hover{
	box-shadow: 0 15px 30px rgba(0,0,0,0.1);
	z-index: 20;
	top: -1px;
	
 }

 .rmb-product-detail {
	width: 100%;
	text-align: center;
	height: 100px;
	border-bottom: solid #cccccc 1px;
	background: #fff;
	overflow: hidden;
 }
 .rmb-product-detail>a{
	width: 100%;
	height: 100px;
	display: grid;
	display: flex; 
	vertical-align: middle;
	text-align: center;
	
 }
 .rmb-product-detail>a>img{
	max-width: 100%;
	/*max-height: 100%;*/
	vertical-align: middle;
	margin: auto;
 }
 .rmb-product-detail>a img:hover{ 
  	cursor: pointer;  
    transition: all 0.6s; 
	 -webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);
 }

 .rmb-product-desc{
	margin-top: 1.5px;
	text-align: left;
	padding-left: 10px;
	font-size:14px;
	height: 39px; 
 }
 .rmb-product-explain{padding:4px 0px;border:0px solid #ff0000;height:26px;overflow:hidden}
 .rmb-product-explain a{
	color: #454545;
	font-size: 14px; 
 }
 .rmb-product-price{;border:0px solid #ff0000;margin:0px;padding:5px 0px 0px 0px}

}
</style>
<script type="text/javascript" src="__JS__/Base64.js"></script>
				 <ul class="nav nav-tabs" id="myTab"> 
                    <li <eq name="tab" value="all">           class="active"</eq>>         <a href="{:U('Usercenter/Live/index',array('tab'=>'all'))}"           tab="#all">所有课程</a></li> 
                    <li <eq name="tab" value="PaymentsMade">  class="active"</eq>><a href="{:U('Usercenter/Live/index',array('tab'=>'PaymentsMade'))}"  tab="#PaymentsMade">已过期</a></li> 
                    <li <eq name="tab" value="PaymentsDue">   class="active"</eq>> <a href="{:U('Usercenter/Live/index',array('tab'=>'PaymentsDue'))}"   tab="#PaymentsDue">未开始</a></li> 
                 </ul> 
        
                 <div class="tab-content"> 
                    <div class="tab-pane" id="unread" style="display:block;">
					<!---------------------------------------------------------------->
					<ul>
					<volist name="list" id="vo">
					  <li class="rmb-box">
                    
					      <div class="rmb-product-detail">
									<a href="{:U('/Live/Index/Detail',array('id'=>$vo["id"]))}" target="_blank">
										<img src="{$vo['image']|get_cover='path'}" data-echo="{$vo['image']|get_cover='path'}">	
									</a>													 
					      </div>  
								<div class="rmb-product-desc">
									<div class="rmb-product-explain"><a href="{:U('/Live/Index/Detail',array('id'=>$vo["id"]))}" target="_blank">{$vo.title}</a></div>
									<div class="rmb-product-explain">时间：{$vo.starttime|date='Y-m-d H:i',###}~{$vo.endtime|date='H:i',###}</div>
									<div class="rmb-product-price">
									    <if condition="$vo.ispay eq '2'">
										    <span class="visible-xs"><a href="javascript:gotomeeting({$vo["id"]})" class="btn btn-primary btn-sm" target="_blank">&nbsp;&nbsp;进入课堂 >&nbsp;&nbsp;</a></span>
									        <span class="hidden-xs"><a href="{:U('/Live/Index/gotomeeting',array('id'=>$vo["id"]))}" class="btn btn-primary btn-sm" target="_blank">&nbsp;&nbsp;进入课堂 >&nbsp;&nbsp;</a></span>
										<else/>
										    <span><a href="{:U('/Payoff/Index/index',array('orderid'=>$vo['orderid']))}" class="btn btn-default btn-sm">&nbsp;&nbsp;前去支付 >&nbsp;&nbsp;</a></span>
										</if>
									</div>
						       </div>

					   </li> 
					</volist>
					</ul>
                    <div style="clear:both;height:0px"></div>
					<if condition="count($list) eq 0">
                        <div style="font-size:20px;padding:2em 0;color: #ccc;text-align: center;height:500px">还没有内容哦。O(∩_∩)O~</div>
                    </if>
					<div class="text-right" style="margin-right:20px;">
                       {:getPagination($totalPageCount,$count)}
                    </div>
					<!---------------------------------------------------------------->
					</div> 
                 </div> 
		 
<script language="javascript">
  /*
  var isAndroid = /Android/.test(navigator.userAgent);
  var isCef = (navigator.vendor == "Google Inc.");
  function getWebviewANE() {
    return (isCef) ? webViewANE : window.webkit.messageHandlers.webViewANE;
  } 
  */
  function gotomeeting(room)
  {
     var userid='<php> echo session("user_auth")["uid"];</php>';
	 var username='<php> echo session("user_auth")["username"];</php>';
	 var role=2;
	 
	 if(userid=="" || username=="")
	 {
	    //toastr.success('欢迎回来，页面正在跳转，请稍候。', '温馨提示');
        toastr.error("登录信息已过期，请重新登录。", '温馨提示');

	    return false;
	 }
	 //alert(userid+username);
	 /*
	var messageToPost = {
                'functionName': 'js_to_as',
                'callbackName': 'jsCallback',
                'args': ['gotomeeting',userid,escape(username),room,role]
    };
    //if Android need to stringify
	//toastr.success(JSON.stringify(messageToPost), navigator.vendor);
    getWebviewANE().postMessage(isAndroid ? JSON.stringify(messageToPost) : messageToPost);
	*/
	var messageToPost = {
                'action': 'gotomeeting',
                'userid': userid,
				'username': escape(username),
				'room': room,
				'role': role,
    };

	//alert(Base64.encode(JSON.stringify(messageToPost)));
	//alert(encodeURI(Base64.encode(JSON.stringify(messageToPost))));
     //StageWebViewBridge.call('fnCalledFromJS',null,JSON.stringify(messageToPost));
	 var url="{:U('gotomeeting',array('jscallas'=>'_args_','success'=>'1'))}";
	 url=url.replace('_args_',Base64.encode(JSON.stringify(messageToPost)));
	 //alert(url);
	 window.location.href=url;
  }
  
 
</script>				 

</block>
